<template>
	<view>
		<u-navbar :placeholder="true" title="分类" bgColor="#fef2e6" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="iptbox">
			<u-search borderColor="#E3E3E3" :searchIconSize="60" bgColor="#fff" searchIconColor="#f38b0a"
				:inputStyle="inputStyle" :showAction="false" placeholder="请输入关键字" v-model="keyword"
				@search="getGoodsList(true)"></u-search>
		</view>
		<view class="lis-box safe-btm">
			<view class="left-sidebar">
				<view class="li oneline-hide" v-for="(item,index) in primaryClass" :key="item.id" @click="clickSidebar(item)">
					<view :class="{'xian':item.id=== cat_id}"></view>
					{{item.name}}
				</view>
			</view>
			<view class="right-sidebar">
				<view v-if="threeClass.length" class="nav">
					<view class="nav-box" :class="{'hide-nav':!isicon}">
						<view class="nav-item" :class="{'active': item.id === cat_id_3}" v-for="(item,index) in threeClass"
							:key="item.id" @click="clickNav(item)">
							{{item.name}}
						</view>
					</view>
					<view style="padding: 5rpx 0;">
						<u-icon :name="isicon?'arrow-up-fill':'arrow-down-fill'" @click="isicon=!isicon" color="#c2c2c2"></u-icon>
					</view>
				</view>
				<!-- <view class="product-box"> -->
				<scroll-view :scroll-y="true" class="product-box" scroll-with-animation="true" @scrolltolower="lower">
					<view class="product-li" v-for="(item,idx) in goodsList" :key="item.goods_id"
						@click="$navTo('pages/studys/dataDetails?goods_id=' + item.goods_id)">
						<image :src="item.original_img" mode="aspectFit" lazy-load></image>
						<view class="right">
							<view class="title .twoline-hide">
								{{item.goods_name}}
							</view>
							<view class="vtitle">
								共{{item.store_count}}个文件
							</view>
							<view class="b">
								<view class="l">
									{{item.sales_sum}}次打印
								</view>
								<view class="r" @click.stop="addPrint(item)">
									+
								</view>
							</view>
						</view>
					</view>
					<u-empty :show="goodsList.length < 1" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
						textSize="27rpx" iconSize="200rpx">
					</u-empty>

					<u-loading-icon v-if="showloading" text="加载中..." :size="40" :textSize="30"></u-loading-icon>
				</scroll-view>
				<!-- </view> -->

			</view>


		</view>

		<view class="bottom-btn safe-btm">
			<view class="btn">
				我的订单
			</view>
			<view class="btn" @click="$navTo('pages/indexs/doc/upload')">
				待打印列表
				<view v-if="shopCartNum" class="yuandian">
					{{shopCartNum}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		PrintApi,
		StudyApi
	} from '@/api';
	export default {
		data() {
			return {
				// 搜索框样式
				inputStyle: {
					width: '690rpx',
					height: '70rpx',
					// background:' #ffffff',
				},
				keyword: '', // 搜索
				isicon: false, //点击三角更多
				showloading: false, //加载更多
				goodsList: [], //商品列表
				pageNo: 1, // 页码
				primaryClass: [], // 一级分类
				cat_id: 0, //1级id
				cat_id_3: 0, //3级id
				shopCartNum: 0, // 购物车数量
			};
		},
		computed: {
			// 三级分类
			threeClass() {
				if (!this.cat_id_3)
					return []
				if (!this.primaryClass.length)
					return []
				return this.primaryClass.find(item => this.cat_id == item.id)?.children || []
			},
		},
		async onLoad(option) {
			try {
				const res = await StudyApi.getGoodsCateList({
					one_three: 1,
				})
				if (res.status !== 1)
					throw new Error('请求失败')
				this.primaryClass = res.result
				this.cat_id = Number(option.cat_id)
				// 设置默认三级分类ID
				this.cat_id_3 = Number(option?.cat_id_3) ||
					this.primaryClass.find(item => item.id === this.cat_id).children[0]?.id ||
					0
				await this.getGoodsList()
			} catch (err) {
				this.$showToast(err || err.message || '数据错误')
			}
		},
		onShow() {
			this.getShopCartNum()
		},
		methods: {
			// 添加待打印
			addPrint(data) {
				this.$showLoading()
				PrintApi.AjaxJionCart({
						type: 0,
						goods_num: 1,
						goods_id: data.goods_id,
						item_id: data.specs[0].item_id
					})
					.then(res => {
						this.getShopCartNum()
						uni.hideLoading()
						this.$showToast(res.msg)
					})
					.catch(err => {
						uni.hideLoading()
						this.$showToast(err || '添加失败')
					})
			},
			// 获取商品
			async getGoodsList(init = true) {
				try {
					if (init) {
						this.pageNo = 1
						this.goodsList = []
					}
					const {
						cat_id,
						cat_id_3,
						pageNo: p
					} = this
					let form = {
						size: 10,
						p,
						cat_id,
						cat_id_3,
					}
					if (this.keyword?.trim().length) form.keywords = this.keyword
					const res = await StudyApi.CateGoods(form)
					if (res.status !== 1)
						throw new Error('加载失败')
					const goodsList = await Promise.all(res.goodslist.map(async (item) => {
						const spec_res = await StudyApi.Goodspec({
							goods_id: item.goods_id
						})
						return {
							...item,
							specs: spec_res.result || [{
								key_name: '无规格',
								key: '1'
							}]
						}
					}))
					this.goodsList.push(...goodsList)
					this.showloading = false
				} catch (err) {
					this.$showToast(err?.message || err)
				}

			},
			rightClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取待打印列表
			async getShopCartNum() {
				const carlist = await StudyApi.CartAllList()
				this.shopCartNum = carlist.result.length
			},
			// 点击tads
			clickNav(data) {
				this.cat_id_3 = data.id
				this.getGoodsList(true)
			},
			// 点击侧边
			clickSidebar(data) {
				this.cat_id = data.id
				this.cat_id_3 = data.children[0]?.id || 0
				this.getGoodsList(true)
			},
			// 上拉更新
			lower() {
				this.showloading = true
				this.getGoodsList(true)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-empty>image {
		width: 250rpx !important;
		height: 250rpx !important;
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 158rpx;
		width: 100vw;
		box-sizing: border-box;
		padding: 24rpx 30rpx;
		display: flex;

		.btn {
			width: 330rpx;
			height: 83rpx;
			line-height: 83rpx;
			border-radius: 15rpx;
			opacity: 1;
			border: 2rpx solid #fd8b07;
			background: #ffffff;
			color: #ff890b;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			position: relative;

			.yuandian {
				width: 36rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				position: absolute;
				top: -11rpx;
				right: -18rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #fff;
				// border: 1px solid #d8d8d8;
				background: #f22b2e;
				border-radius: 50%;
			}
		}

		>.btn:nth-child(2) {
			background: #fd8907;
			color: #fff;
			margin-left: 30rpx;
		}

	}

	.iptbox {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fef2e6;
	}


	.lis-box {
		display: flex;
		width: 100vw;
		box-sizing: border-box;
		height: calc(100vh - 60rpx - 250rpx);

		.right-sidebar {
			height: 100%;
			flex: 1;
			box-sizing: border-box;
			background-color: #fff;
			padding: 40rpx 20rpx 40rpx 30rpx;

			.product-box {
				width: 100%;
				height: calc(100% - 50rpx);
				box-sizing: border-box;
				opacity: 1;
				overflow-y: auto;
				padding-bottom: 70rpx;

				.product-li {
					width: 485rpx;
					height: 191rpx;
					box-sizing: border-box;
					padding: 2rpx;
					display: flex;

					margin-top: 50rpx;

					image {
						width: 138rpx;
						height: 188rpx;
						margin-right: 23rpx;
					}

					.right {
						flex: 1;

						.b {
							display: flex;
							align-items: center;
							width: 100%;
							justify-content: space-between;

							.r {
								width: 47rpx;
								height: 47rpx;
								border-radius: 50%;
								text-align: center;
								line-height: 41rpx;
								font-size: 40rpx;
								font-weight: 700;
								color: #fff;
								background-color: #fb8b07;
							}
						}

						.title {
							font-size: 30rpx;
							font-weight: 400;
							font-family: "Source Han Sans";
						}

						.vtitle {
							margin: 7rpx 0 5rpx 0;
						}

						.vtitle,
						.l {
							color: #b2b2b2;
							text-align: left;
							font-size: 26rpx;
							font-weight: 400;
						}
					}


				}

			}


			.nav {
				display: flex;
				// align-items: center;
				align-items: flex-start;

				.nav-box {
					flex: 1;
					display: flex;
					align-items: center;
					background-color: #fff;
					flex-wrap: wrap;
				}

				.hide-nav {
					overflow: hidden;
					height: 50rpx;
				}

				.nav-item {
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-right: 15rpx;
					padding: 0 18rpx;
					height: 50rpx;
					font-size: 26rpx;
					background: #f6f5fa;
				}

				.active {
					background-color: #fef2e6;
					color: #fb8b07;
				}
			}

		}

		.left-sidebar {
			width: 223rpx;
			background: #f6f6f6;
			box-sizing: border-box;
			padding: 40rpx 23rpx 0 4rpx;
			height: calc(100% - 50rpx);
			overflow-y: auto;

			.li {
				width: 196rpx;
				text-align: center;
				font-size: 30rpx;
				height: 107rpx;
				line-height: 107rpx;
				position: relative;

				.xian {
					position: absolute;
					top: 50%;
					right: 0rpx;
					transform: translateY(-50%);
					width: 14rpx;
					height: 42rpx;
					border-radius: 50rpx;
					opacity: 1;
					border: 1rpx solid #d8d8d8;
					background: #fb8b07;
				}
			}

		}

	}
</style>